<template>
  <!-- 卡片1 小方块-->
  <view v-if="styleId === 1" class="">
    <navigator
      class="card-item1"
      target=""
      :url="`/pages/search/particulars/index?id=${data.id}`"
      hover-class="navigator-hover"
      open-type="navigate"
    >
      <view class="oneMes"
      @click="()=>{
          postTopGuestsAPI(data)
      }"
      >
        <view class="imageItem">
          <image
            class="image"
            :src="['.jpg', '.jpeg', '.png', '.gif', '.webp'].some(item => data.avatar.endsWith(item)) ? data.avatar : '/static/tabs/user_default.png'"
            mode="aspectFit|aspectFill|widthFix"
            lazy-load="false"
          >
          </image>
        </view>
        <view class="name">
          <text class="name-item" selectable="false" space="false" decode="false">
            {{ data.nickname }}
          </text>
        </view>
        <view class="message" hover-class="none" hover-stop-propagation="false">
          {{ data.age ? data.age : '暂无年龄' }}岁/{{
            data.my_city.length > 0 ? data.my_city : '暂无地区'
          }}
        </view>
      </view>
    </navigator>
  </view>
  <!-- 卡片2 大长方块-->
  <view class="card-item2" v-else> </view>
</template>

<script setup lang="ts">
import type { TopGuests } from '@/types/index/home'
import { ref } from 'vue'
import { postTopGuestsAPI } from "@/services/index/home";
defineProps<{ styleId: number; data: TopGuests }>()
</script>

<style scoped lang="scss">
.card-item1 {
  width: 300rpx;
  height: 400rpx;
  border-radius: 30rpx;
  margin: 30rpx 20rpx 40rpx 20rpx;
  box-shadow: 2rpx 5rpx 10rpx -2rpx #dbdbdb;

  .oneMes {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    .imageItem {
      width: 175rpx;
      height: 175rpx;
      border-radius: 50%;
      // background-color: #f093ad;
      position: relative;
      top: -30rpx;

      .image {
        border-radius: 50%;
      }
    }

    .name {
      color: #f27a9b;
      position: relative;
      top: -20rpx;
    }

    .message {
      color: #f27a9b;
      position: relative;
      top: 20rpx;
    }
  }
}

.card-item2 {
  width: 700rpx;
  height: 400rpx;
  border-radius: 30rpx;
  margin: 50rpx 20rpx 20rpx 20rpx;
  box-shadow: 2rpx 5rpx 10rpx -2rpx #dbdbdb;
  background-color: #f9d1da;
}
</style>
